<template>
    <div class="view-container">
      <el-card class="info-card">
        <el-form label-width="100px" :model="form" :rules="rules" ref="pwdForm">
          <el-form-item label="当前密码:" prop="oldpwd">
            <el-input v-model="form.oldpwd" placeholder="请输入当前密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码:" prop="newpwd">
            <el-input v-model="form.newpwd" placeholder="请输入新密码" type="password"></el-input>
          </el-form-item>
          <el-form-item label="重复新密码:" prop="againpwd">
            <el-input v-model="form.againpwd" placeholder="请重复新密码" type="password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" :loading="saving" @click="submitForm('pwdForm')">确认修改</el-button>
            <el-button @click="cancelForm('pwdForm')">取消</el-button>
          </el-form-item>

        </el-form>
      </el-card>
    </div>
</template>

<script>
  import {modifyPwd} from '@/api/user';
  import {showMessage} from '@/utils/message';
  import {validatePWD} from '@/utils/validate';

  export default {
        name: 'userChangePwd',
        data ()
        {
          const validatePassword = (rule, value, callback) =>
          {
            if (value.length <= 0)
            {
              callback(new Error('请输入当前密码'));
            } else
            {
              callback();
            }
          };
          const validateNewPassword = (rule, value, callback) =>
          {
            if (value.length <= 0)
            {
              callback(new Error('请输入新密码'));
            } else if(!validatePWD(value))
            {
              callback(new Error('密码中必须同时含有大写字母、小写字母、数字，且长度为6-18位'));
            }
            else
            {
              callback();
            }
          };
          const validatePasswordAgain = (rule, value, callback) =>
          {
            if (value.length <= 0)
            {
              callback(new Error('请重复新密码'));
            } else
            {
               if(value !== this.form.newpwd)
               {
                 callback(new Error('两次密码不一致'));
               }
               else {
                 callback();
               }

            }
          };

          return {
            form:{
              oldpwd:'',
              newpwd:'',
              againpwd:'',
            },
            rules: {
              oldpwd: [{trigger: 'blur', validator: validatePassword}],
              newpwd: [{trigger: 'blur', validator: validateNewPassword}],
              againpwd:[{trigger: 'blur', validator: validatePasswordAgain}],
            },
            saving:false,
          }
        },
        methods: {
          submitForm(form)
          {
            this.$refs[form].validate(valid =>
            {
              if (valid)
              {
                this.saving = true;
                let data = {
                  oldPwd:this.form.oldpwd,
                  newPwd:this.form.newpwd,
                };
                modifyPwd(data).then((resp)=>{
                  showMessage({title:'密码修改成功',type:'success'});

                  this.saving = false;
                  this.$refs['pwdForm'].resetFields();

                }).catch((err)=>{
                  this.saving = false;
                  this.$refs['pwdForm'].resetFields();
                });
              } else
              {
                return false;
              }
            })
          },
          cancelForm(form)
          {
             this.$refs[form].resetFields();
          }
        }
    }
</script>

<style lang="scss" scoped>
  .info-card {
    max-width: 600px;
    box-shadow: none;
    padding: 30px 60px 0 0;
    position: relative;

  }

</style>
